export const ChinaChart = {
  drawChinaMap(id, datas) {
    let echarts = window.echarts
    let myChart = echarts.init(document.getElementById(id))
    window.onresize = myChart.resize;

    function getMapData(data) {
      let arr = []
      let names = []
      let processData = []
      data.reduce((a, b, c, d) => {
        if (names.indexOf(b.name) === -1) {
          names.push(b.name)
          processData.push(b)
          arr.push(b.value)
        }
        // return processData
      }, [])
      return processData
    }
    let processData = getMapData(datas.data)
    echarts.registerMap('China', datas.chinaData)
    // console.log(datas.chinaData)
    // let option = { // 进行相关配置
    //   backgroundColor: "#02AFDB",
    //   tooltip: {
    //     trigger: 'item',
    //     formatter: '{b}<br/>{c} (p / km2)'
    //   }, // 鼠标移到图里面的浮动提示框
    //   dataRange: {
    //     show: false,
    //     min: 0,
    //     max: 1000,
    //     text: ['High', 'Low'],
    //     realtime: true,
    //     calculable: true,
    //     color: ['orangered', 'yellow', 'lightskyblue']
    //   },
    //   geo: { // 这个是重点配置区
    //     map: 'china', // 表示中国地图
    //     roam: true,
    //     label: {
    //       normal: {
    //         show: true, // 是否显示对应地名
    //         textStyle: {
    //           color: 'rgba(0,0,0,0.4)'
    //         }
    //       }
    //     },
    //     itemStyle: {
    //       normal: {
    //         borderColor: 'rgba(0, 0, 0, 0.2)'
    //       },
    //       emphasis: {
    //         areaColor: null,
    //         shadowOffsetX: 0,
    //         shadowOffsetY: 0,
    //         shadowBlur: 20,
    //         borderWidth: 0,
    //         shadowColor: 'rgba(0, 0, 0, 0.5)'
    //       }
    //     }
    //   },
    //   series: [{
    //       type: 'scatter',
    //       coordinateSystem: 'geo' // 对应上方配置
    //     },
    //     {
    //       name: '启动次数', // 浮动框的标题
    //       type: 'map',
    //       mapType: 'China',
    //       roam: false,
    //       itemStyle: {
    //         normal: {
    //           label: {
    //             show: true
    //           }
    //         },
    //         emphasis: {
    //           label: {
    //             show: true
    //           }
    //         }
    //       },
    //       geoIndex: 0,
    //       // data: [...processData]
    //       data: processData
    //     }
    //   ]
    // }
    let option = { // 进行相关配置
      backgroundColor: "#02AFDB",
      tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c} (p / km2)'
      }, // 鼠标移到图里面的浮动提示框
      visualMap: {
        min: 800,
        max: 1000,
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        inRange: {
          color: ['orangered', 'yellow', 'lightskyblue']
        }
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          dataView: {
            readOnly: false
          },
          restore: {},
          saveAsImage: {}
        }
      },
      geo: { // 这个是重点配置区
        map: 'China', // 表示中国地图
        roam: true,
        label: {
          normal: {
            show: true, // 是否显示对应地名
            textStyle: {
              color: 'rgba(0,0,0,0.4)'
            }
          }
        },
        itemStyle: {
          normal: {
            borderColor: 'rgba(0, 0, 0, 0.2)'
          },
          emphasis: {
            areaColor: null,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },
      series: [{
          type: 'scatter',
          coordinateSystem: 'geo' // 对应上方配置
        },
        {
          name: '启动次数', // 浮动框的标题
          type: 'map',
          mapType: 'China',
          roam: false,
          itemStyle: {
            normal: {
              label: {
                show: true
              }
            },
            emphasis: {
              label: {
                show: true
              }
            }
          },
          geoIndex: 0,
          // data: [...processData]
          data: processData
        }
      ]
    }
    myChart.clear()
    myChart.setOption(option)
  }
}



// WEBPACK FOOTER //
// ./src/assets/js/chart/chinaChart.js